<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Layout</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">

		<link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css" />
		<link rel="stylesheet" href="css/layout.css" media="all" />
	</head>

	<body>
		<div class="layui-layout layui-layout-admin beg-layout-container">
			<div class="layui-header beg-layout-header">
				<div class="beg-layout-main beg-layout-logo">LOGO</div>
				<!--一级菜单-->
				<div class="beg-layout-main beg-layout-menu" id="menu">
					<ul class="layui-nav beg-layout-nav" lay-filter="">
						<li class="layui-nav-item">
							<a href="javascript:;" data-module-id="1">
								<i class="fa fa-desktop" aria-hidden="true"></i>
								<cite>内容管理</cite>
							</a>
						</li>
						<li class="layui-nav-item layui-this">
							<a href="javascript:;">
								<i class="fa fa-shopping-bag" aria-hidden="true"></i>
								<cite>商品管理</cite>
							</a>
						</li>
						<li class="layui-nav-item">
							<a href="javascript:;" data-module-id="3">
								<i class="fa fa-users" aria-hidden="true"></i>
								<cite>会员管理</cite>
							</a>
						</li>
						<li class="layui-nav-item">
							<a href="javascript:;">
								<i class="fa fa-tv" aria-hidden="true"></i>
								<cite>订单管理</cite>
							</a>
						</li>
						<li class="layui-nav-item">
							<a href="javascript:;">
								<i class="fa fa-gears" aria-hidden="true"></i>
								<cite>设置</cite>
							</a>
						</li>
						<li class="layui-nav-item">
							<a href="javascript:;">
								<i class="fa fa-plug" aria-hidden="true"></i>
								<cite>扩展</cite>
							</a>
						</li>
						<li class="layui-nav-item">
							<a href="javascript:;">
								<i class="fa fa-paper-plane" aria-hidden="true"></i>
								<cite>社区</cite>
							</a>
						</li>
					</ul>
				</div>
				<div class="beg-layout-main beg-layout-panel">
					<ul class="layui-nav beg-layout-nav" lay-filter="">
						<li class="layui-nav-item">
							<a href="javascript:;" class="beg-layou-head">
								<img src="images/0.jpg" />
								<span>beginner</span>
							</a>
							<dl class="layui-nav-child">
								<dd>
									<a href="javascript:;">
										<i class="fa fa-user-circle" aria-hidden="true"></i>
										<cite>个人信息</cite>
									</a>
								</dd>
								<dd>
									<a href="javascript:;">
										<i class="fa fa-gear" aria-hidden="true"></i> 
										<cite>设置</cite>
									</a>
								</dd>
								<dd>
									<a href="login.html" >
										<i class="fa fa-sign-out" aria-hidden="true"></i>
										<cite>注销</cite>
									</a>
								</dd>
							</dl>
						</li>
					</ul>
				</div>
			</div>
			<!--侧边导航栏-->
			<div class="layui-side beg-layout-side" id="side" lay-filter="side">
				<ul class="layui-nav layui-nav-tree" lay-filter="test">
					<li class="layui-nav-item layui-nav-itemed">
						<a href="javascript:;">默认展开</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="javascript:;">选项1</a>
							</dd>
							<dd>
								<a href="javascript:;">选项2</a>
							</dd>
							<dd>
								<a href="">跳转</a>
							</dd>
						</dl>
					</li>
					<li class="layui-nav-item">
						<a href="javascript:;">解决方案</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="">移动模块</a>
							</dd>
							<dd>
								<a href="">后台模版</a>
							</dd>
							<dd>
								<a href="">电商平台</a>
							</dd>
						</dl>
					</li>
					<li class="layui-nav-item">
						<a href="">产品</a>
					</li>
					<li class="layui-nav-item">
						<a href="">大数据</a>
					</li>
				</ul>
			</div>
			<!--内容区域-->
			<div class="layui-body beg-layout-body">
				<div class="layui-tab layui-tab-brief layout-nav-card" lay-filter="layout-tab" style="border: 0; margin: 0;box-shadow: none; height: 100%;">
					<ul class="layui-tab-title">
						<li class="layui-this">
							<i class="fa fa-dashboard" aria-hidden="true"></i>
							<cite>控制面板</cite>
						</li>
					</ul>
					<div class="layui-tab-content">
						<div class="layui-tab-item layui-show">
							<iframe src="main.html"></iframe>
						</div>
					</div>
				</div>
			</div>
			<!--页脚-->
			<div class="layui-footer beg-layout-footer">
				<p>2016 &copy;
					<a href="http://beginner.zhengjinfan.cn/demo/beginner_admin/">beginner.zhengjinfan.cn</a> LGPL license
				</p>
			</div>
		</div>
		<script src="plugins/layui/layui.js"></script>
		<script>
			layui.config({
				base: 'js/'
			}).use(['element', 'layer', 'navbar', 'tab'], function() {
				var element = layui.element()
				$ = layui.jquery,
					layer = layui.layer,
					navbar = layui.navbar(),
					tab = layui.tab({
						elem: '.layout-nav-card' //设置选项卡容器
					});

				//iframe自适应
				$(window).on('resize', function() {
					var $content = $('.layout-nav-card .layui-tab-content');
					$content.height($(this).height() - 147);
					$content.find('iframe').each(function() {
						$(this).height($content.height());
					});
				}).resize();

				var $menu = $('#menu');
				$menu.find('li.layui-nav-item').each(function() {
					var $this = $(this);
					//绑定一级导航的点击事件
					$this.on('click', function() {
						//获取设置的模块ID
						var id = $this.find('a').data('module-id');						
						//这里的数据源只是演示时用的，实际需求可能通过远程读取（根据模块ID来获取对应模块的信息）
						var url;
						switch(id) {
							case 1:
								url = 'datas/nav_content.json';
								break;
							case 3:
								url = 'datas/nav_member.json';
								break;
							default:
								break;
						}
						//设置数据源有两个方式。
						//第一：在此页面通过ajax读取设置  举个栗子：
						//---------这是第一个栗子----------
						/*$.getJSON('/api/xxx',{moduleId:id},function(data){
							navbar.set({
								elem: '#side',
								data: data
							});
							navbar.render();
							navbar.on('click(side)', function(data) {
								tab.tabAdd(data.field);
							});
						});*/
						//------------栗子结束--------------
						//第二：设置url
						//---------这是第二个栗子----------
						/*navbar.set({
							elem: '#side',
							url: '/api/xxx?moduleId='+id
						});
						navbar.render();
						navbar.on('click(side)', function(data) {
							tab.tabAdd(data.field);
						});*/
						//------------栗子结束--------------	
						
						//设置navbar
						navbar.set({
							elem: '#side', //存在navbar数据的容器ID
							url: url
						});
						//渲染navbar
						navbar.render();
						//监听点击事件
						navbar.on('click(side)', function(data) {
							layer.msg(data.field.href);
							tab.tabAdd(data.field);
						});
					});

				});

			});
		</script>
	</body>

</html>